---
title: Sign in to a service
name: Sign in to a service
scenario: |
  As part of an online service, you have to sign in before accessing it.

  Things to try:

  1. Intentionally avoid answering the questions before continuing to the next page.
---

{% extends "layouts/full-page-example.njk" %}

{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/password-input/macro.njk" import govukPasswordInput %}
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{% from "govuk/components/button/macro.njk" import govukButton %}

{% set pageTitle = example.title %}
{% block pageTitle %}{{ "Error: " if errorSummary | length }}{{ pageTitle }} - GOV.UK{% endblock %}

{% block beforeContent %}
  {{ govukBackLink({
    text: "Back"
  }) }}
{% endblock %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      {% if errorSummary | length %}
        {{ govukErrorSummary({
          titleText: "There is a problem",
          errorList: errorSummary
        }) }}
      {% endif %}

      <h1 class="govuk-heading-xl">{{ pageTitle }}</h1>

      <p class="govuk-body">You'll first need to <a class="govuk-link" href="#">create an account</a> if you haven't already. You can also <a class="govuk-link" href="#">reset your password</a> if you can't remember it.</p>

      <form method="post" novalidate>

        {{ govukInput({
          label: {
            text: "Email address",
            classes: "govuk-label--m"
          },
          type: "email",
          id: "email",
          name: "email",
          value: values["email"],
          errorMessage: errors["email"],
          autocomplete: "email",
          spellcheck: false
        }) }}

        {{ govukPasswordInput({
          label: {
            text: "Password",
            classes: "govuk-label--m"
          },
          id: "password",
          name: "password",
          value: values["password"],
          errorMessage: errors["password"],
          autocomplete: "current-password"
        }) }}

        {{ govukCheckboxes({
          name: "remember-me",
          classes: "govuk-checkboxes--small",
          items: [
            {
              value: "true",
              text: "Keep me signed in on this device"
            }
          ]
        }) }}

        {{ govukButton({
          text: "Sign in"
        }) }}

      </form>
    </div>
  </div>
{% endblock %}
